<template>
  <c-list
    :data-source="files"
    layout="horizontal"
    :split="false"
    :gutter="10"
    class="file-image-container"
    :item-width="width+'px'"
    :item-height="(height+2)+'px'"
    item-layout="vertical"
    item-padding="0"
    :item-border="true">
    <template #customItem>
      <slot />
    </template>
    <template #item="{item}">
      <c-item>
        <div
          class="image-item"
          :style="{width:width+'px',height:height+'px'}">
          <el-image :src="common.getFileView(item)" :width="width+'px'" fit="contain" lazy />
          <div class="tool-bar">
            <div class="tool-bar-container">
              <el-tooltip class="item" effect="dark" content="文件预览" placement="top">
                <fileViewer :type="1" :url="dealFileUuid(item)">
                  <svg-icon icon-class="btnPreview" />
                </fileViewer>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="文件删除" placement="top">
                <svg-icon v-if="remove" icon-class="btnRemove" @click="removeFile(item)" />
              </el-tooltip>
            </div>
          </div>
        </div>
      </c-item>
    </template>
  </c-list>
</template>
<script>
export default {
  name: 'FileItem',
  props: {
    files: {
      type: Array,
      default() {
        return []
      }
    },
    width: {
      type: Number,
      default: 148
    },
    height: {
      type: Number,
      default: 148
    },
    remove: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      itemBorder: '1px dashed #d9d9d9'
    }
  },
  watch: {
    files: function(val) {
    }
  },
  created() {
  },
  methods: {
    removeFile(uuid) {
      if (!uuid) {
        this.$modal.msgWarning('缺少文件标识')
        return
      }
      this.$emit('remove', uuid)
    },
    dealFileUuid(img) {
      var datas = this.files.filter(item => {
        return item !== img
      })
      datas = [img, ...datas]
      return datas.join(',')
    }
  }
}
</script>

<style lang="scss" scoped>
.file-image-container{
  margin-bottom: 0px;
  .image-item{
    cursor: pointer;
    position: relative;
    overflow: hidden;
    .el-image{
      width: 100%;
      height: 100%;
    }
    img{
      width: 100%;
      height: 100%;
      border-radius:4px
    }
    .tool-bar{
      position: absolute;
      top: 0px;
      height: 25px;
      background: rgba(0,0,0,0.8);
      width: 100%;
      border-radius: 4px 4px 0px 0px;
      display: none;
      .tool-bar-container{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-top: 0.4em;
      }
      .svg-icon{
        width: 14px !important;
        height: 14px !important;
        color: #fff;
        margin: 0 5px 3px;
      }
    }
  }
  .image-item:hover .tool-bar{
    display: block;
  }
}
</style>
